<template>
	<div class="nav-box" v-if="dataList.length > 0">
		<el-scrollbar max-height="50vh">
			<div class="progress-box" style="width: 100%">
				<div class="time-line">
					<div class="time-line-item" v-for="(item, index) in dataList" :key="index">
						<div class="time-line-item-header flex gap-20 align-center">
							<p class="text-time">{{ item.timestamp }}</p>
							<p class="text-title">{{ item.createUserName }} ({{ item.unitName }})</p>
						</div>
						
						<div class="nav-list-box">
							<div class="content-item" v-for="(content, index) in item.changeContent" :key="index">
								<p>{{ content.name }}</p>
								<div class="flex align-center">
									<p class="text-value">将</p>
									<p class="tag-value">
										<ContentPage :item="content.before"></ContentPage>
									</p>
									<p class="text-value">改为</p>
									<p class="tag-value">
										<ContentPage :item="content.after"></ContentPage>
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</el-scrollbar>
		<AplidPaginate v-bind="pageReac" @change="onPageChange" class="pageinate" />
	</div>
	<el-empty v-else :image="defaultLoading" :image-size="400" description="暂无数据" class="empty" />
</template>

<script setup lang="ts">
import defaultLoading from '@/assets/imgs/empty.webp'
import apiMod from '@/apiMod'
import { AplidPaginate } from '@/components/AplidCrud'
import ContentPage from '../DataGather/content.vue'

const props = defineProps<{
	code?: string | number
	soleKey: string
}>()
const dataList = ref([])

let pageReac = ref({
	total: 0,
	size: 10,
	current: 1,
})

const getInitData = () => {
	apiMod
		.view_dpChangeRecord_page({
			soleKey: props.soleKey,
			code: props.code,
			pageParaPO: {
				...pageReac.value,
			},
		})
		.then((res) => {
			const data = res.data
			pageReac.value.total = data.total
			dataList.value = data.records.map((item) => {
				return {
					...item,
					type: 'primary',
					hollow: true,
					timestamp: item.createTime,
				}
			})
		})
}

const onPageChange = (page) => {
	pageReac.value = page
	getInitData()
}

onMounted(() => {
	getInitData()
})
</script>

<style scoped lang="scss">
@import '@/views/instOperate/components/styles/progress.scss';
.tag-value {
	text-align: center;
	padding: 2px 10px;
	border-radius: 4px;
	background: rgba(105, 158, 245, 0.1);
	color: rgba(105, 158, 245, 1);
	margin: 10px;
}
.content-item {
	gap: 10px;
	display: flex;
  flex-flow: column;
	width: 45%;
}
.nav-list-box {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
}
.text-label {
	color: rgba(0, 0, 0, 0.5);
	font-weight: 600;
}
.text-value {
	color: rgba(0, 0, 0, 1);
	font-weight: 600;
}
.pageinate {
	padding: 10px;
}
</style>
